<template>
    <div class="forget">
      <div class="forget-wrap">
        <a-form
          id="components-form-demo-normal-login"
          class="login-form"
          v-bind="formItemLayout"
        >
          <a-from-item>
            <!-- <span class="from-title">登录界面</span> -->
          </a-from-item>
          <a-form-item>
            <label class="from-text">账号</label>
            <a-input placeholder="请输入账号"> </a-input>
          </a-form-item>
          <a-form-item>
            <label class="from-text">新密码</label>
            <a-input type="password" placeholder="请输入新的密码"> </a-input>
          </a-form-item>
          <a-form-item>
            <label class="from-text">确认密码</label>
            <a-input type="password" placeholder="请确认新的密码"> </a-input>
          </a-form-item>
          <a-from-item>
            <label class="from-text">验证码</label>
            <a-row :gutter="10">
              <a-col :span="12">
                <a-input placeholder="请输入验证码" />
              </a-col>
              <a-col :span="12" :push="4">
                <a-button type="primary"
                  ><span v-show="show" @click="Verification">获取验证码</span>
                  <span v-show="!show" class="count"
                    >{{ count }} s 后获取</span
                  ></a-button
                >
              </a-col>
            </a-row>
          </a-from-item>
          <a-form-item>
            <a-button
              type="primary"
              @click="submitModify"
              class="login-form-button"
            >
              找回
            </a-button>
          </a-form-item>
        </a-form>
        <div class="forget-wrap-bottom">
          <a href="" class="text-color"
            ><i class="iconfont icon-zhuce"></i> 返回登录
          </a>
          |
          <router-link to="/Register" class="text-color"
            ><i class="iconfont icon-wangjimima"></i> 快速注册
          </router-link>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from "vue";
  export default {
    name: "Forget",
    setup() {
      const show = ref(true);
      const timer = ref();
      const TIME_COUNT = ref(60);
      const count = ref();
      const submitModify = () => {
        alert("修改密码成功");
      };
      //点击发送验证码
      const Verification = () => {
        if (!timer.value) {
          count.value = TIME_COUNT.value;
          show.value = false;
          timer.value = setInterval(() => {
            if (count.value > 0 && count.value <= TIME_COUNT.value) {
              count.value--;
              //console.log("count----", count);
            } else {
              show.value = true;
              clearInterval(timer.value);
              timer.value = null;
            }
          }, 1000);
        }
        alert("已发送，请注意查收");
      };
      return {
        submitModify,
        Verification,
        show,
        timer,
        TIME_COUNT,
        count,
      };
    },
  };
  </script>
  